<template>
  <zm-panel :title="PTitle" tip="*为必填项" required-tag :visible.sync="value" @change="close">
    <zm-form :model="form" ref="form" :rules="Rules" label-width="140px">
      <div class="leftForm vm">
        <h3 class="subTitle">基础信息</h3>
        <el-form-item label="客户名称：" prop="customerDataId">
          <zm-data-select v-model="form.customerDataId" :list="customerDataList" value-key="value" label-name="name" class="w300"></zm-data-select>
          <el-button type="success" size="mini" @click="addCustomer" icon="el-icon-plus">新增</el-button>
        </el-form-item>
        <el-form-item label="所属行业：" prop="tradeType">
          <!-- <zm-data-select v-model="form.tradeType" k1="tradeType" placeholder="客户行业" class="w300"></zm-data-select> -->
          <span>{{tradeTypeName || '--'}}</span>
        </el-form-item>
        <el-form-item label="客户类型：" prop="customerType">
          <zm-data-select v-model="form.customerType" api="getDictList" :params="{type: 'customerType'}" placeholder="客户类型" class="w300" @change="getRental"></zm-data-select>
        </el-form-item>
        <el-form-item label="最低销售金额阈值：" prop="rental">
          ￥{{form.rental || '--'}}
        </el-form-item>
        <el-form-item label="客户级别：" prop="customerStar">
          <zm-data-select v-model="form.customerStar" :list="CUSTOMER_STAR" placeholder="客户级别" label-name="label" class="w300"></zm-data-select>
        </el-form-item>
        <el-form-item label="客户来源：">
          <zm-data-select v-model="form.customerSource" k1="customerSource" placeholder="客户来源" class="w300"></zm-data-select>
        </el-form-item>
        <el-form-item label="客户状态：" prop="customerStatus">
          <zm-data-select v-model="form.customerStatus" k1="customerStatus" placeholder="客户状态" class="w300"></zm-data-select>
        </el-form-item>
        <el-form-item label="报备项目：" prop="reportProject">
          <zm-input v-model.trim="form.reportProject" maxlength="50" :show-word-limit="true" placeholder="请输入项目名称,建议不超过50个字" class="w300" />
        </el-form-item>
        <zm-form-item label="采购时间：" prop="purchaseDate">
          <zm-date-picker type="date" v-model="form.purchaseDate" class="w300" />
        </zm-form-item>
        <h3 class="subTitle">附加信息</h3>
        <el-form-item label="所在地区：" prop="regionName">
          <zm-input v-model.trim="form.regionName" placeholder="请输入所在地区" class="w300" />
        </el-form-item>
        <el-form-item label="详细地址：" prop="address">
          <zm-input v-model.trim="form.address" placeholder="请输入详细地址" class="w300" />
        </el-form-item>
        <el-form-item label="归属公司：" prop="belongCompany">
          <zm-input v-model.trim="form.belongCompany" placeholder="请输入客户归属公司名称" class="w300" />
        </el-form-item>
        <el-form-item label="开票主体：" prop="invoiceCompany">
          <zm-input v-model.trim="form.invoiceCompany" placeholder="请输入客户开票主体信息" class="w300" />
        </el-form-item>
        <el-form-item label="纳税人识别号：" prop="taxCode">
          <zm-input v-model.trim="form.taxCode" placeholder="请输入客户纳税人识别号" class="w300" />
        </el-form-item>
        <el-form-item label="企业规模：" prop="companyScale">
          <zm-data-select v-model="form.companyScale" k1="companyScale" placeholder="选择规模" class="w300"></zm-data-select>
        </el-form-item>
        <el-form-item label="备注信息：" prop="additionalInformation">
          <zm-input type="textarea" v-model.trim="form.additionalInformation" placeholder="请输入备注信息" :autosize="{minRows: 3}" :maxlength="500" class="w400" />
        </el-form-item>
      </div>
      <div class="rightForm vm">
        <h3 class="subTitle">项目对接信息</h3>
        <el-form-item label="对接人：" prop="linkMan">
          <zm-input v-model="form.linkMan" placeholder="输入对接人姓名" class="w300" />
        </el-form-item>
        <el-form-item label="尊称：" prop="sex">
          <zm-data-radio v-model="form.sex" :list="SEX_TYPE"></zm-data-radio>
        </el-form-item>
        <el-form-item label="职务：" prop="career">
          <zm-input v-model.trim="form.career" placeholder="请输入对接人职务" class="w300" />
        </el-form-item>
        <el-form-item label="手机号码：" prop="mobile">
          <zm-input v-model="form.mobile" placeholder="输入手机号码" class="w300" />
        </el-form-item>
        <el-form-item label="固定电话：" prop="fixedMobile">
          <zm-input v-model="form.fixedMobile" placeholder="输入固定电话" class="w300" />
        </el-form-item>
        <el-form-item label="电子邮箱：" prop="email">
          <zm-input v-model="form.email" placeholder="输入电子邮箱" class="w300" />
        </el-form-item>
        <!-- 新增微信号（非必填）和备注信息 -->
         <el-form-item label="微信号：">
          <zm-input v-model="form.wechat" placeholder="输入微信号" class="w300" />
          <p class="mt10" style="color: #c0c4cc;font-size: 12px"><span style="color: #148f09">*注:</span> 请添加客户完整的联系方式</p>
        </el-form-item>

        <h3 class="subTitle">跟进情况说明</h3>
        <el-form-item label prop="followRemark" label-width="0px">
          <zm-input type="textarea" v-model="form.followRemark" :show-word-limit="true" placeholder="请输入拜访跟进情况说明" :autosize="{minRows: 3}" :maxlength="1000" class="w600" />
        </el-form-item>
      </div>
    </zm-form>
    <new-panel v-if="newParams.visible" v-model="newParams.visible" @after="getCustomerData"></new-panel>
    <div slot="footer" class="tr">
      <el-button size="small" @click="close">取消</el-button>
      <el-button type="primary" size="small" @click="submit">确定</el-button>
    </div>
  </zm-panel>
</template>
<script>
import panelMixin from '@/mixins/panelMixin'
import {checkName, update, create, detail, getCustomerTypeRental} from '@/api/src/customer'
import {getCustomerData} from '@/api/src/public'
// import { standerPhone } from '@/utils/validateRule'
import NewPanel from './newCustomer.vue'

import {
  CUSTOMER_STAR,
  SEX_TYPE
} from '@/model/type'
export default ({
  name: 'NewCustomer',
  components: { NewPanel },
  mixins: [panelMixin],
  data () {
    return {
      CUSTOMER_STAR,
      SEX_TYPE,
      areaValue: [],
      customerDataList: [],
      form: {
        customerName: '',
        tradeType: '',
        customerDataId: '', // 配置Id
        customerType: '',
        rental: '',
        customerStar: '',
        customerSource: '',
        customerStatus: '',
        reportProject: '',
        purchaseDate: '',

        regionName: '',
        address: '',
        belongCompany: '',
        taxCode: '',
        invoiceCompany: '',
        companyScale: '0',
        additionalInformation: '',

        linkMan: '',
        sex: '1',
        career: '',
        mobile: '',
        fixedMobile: '',
        email: '',
        wechat: '',
        followRemark: ''

      },
      tradeTypeName: '', // 所属行业名称
      editInfo: {}, // 编辑保存
      Rules: {
        customerDataId: { required: true, message: '请选择客户名称', trigger: 'change' },
        tradeType: { required: true, message: '请选择行业', trigger: 'change' },
        customerType: { required: true, message: '请选择客户类型', trigger: 'change' },
        customerStar: { required: true, message: '请选择客户级别', trigger: 'change' },
        customerSource: { required: true, message: '请选择客户来源', trigger: 'change' },
        customerStatus: { required: true, message: '请选择客户状态', trigger: 'change' },
        reportProject: { required: true, message: '请输入报备项目', trigger: 'blur' },
        // purchaseDate: { required: true, message: '请选择采购时间', trigger: 'change' },
        // taxCode: { required: true, message: '请输入纳税人识别号', trigger: 'blur' },
        linkMan: { required: true, message: '请输入联系人姓名', trigger: 'blur' },
        career: { required: true, message: '请输入对接人职务', trigger: 'blur' },
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
          // { validator: standerPhone }
        ]
      },
      newParams: {
        visible: false,
        obj: {}
      }
    }
  },
  computed: {
    PTitle () {
      return this.obj.id ? '编辑客户' : '创建客户'
    },
    customerData () {
      if (this.customerDataList.length > 0) {
        return this.customerDataList.find(item => item.value === this.form.customerDataId)
      } else {
        return ''
      }
    }
  },
  watch: {
    'form.customerDataId': {
      handler (newVal, oldVal) {
        this.$set(this.form, 'tradeType', this.customerData ? this.customerData.tradeType : '')
        this.$set(this.form, 'customerName', this.customerData ? this.customerData.name : '')
        this.tradeTypeName = this.customerData ? this.customerData.tradeTypeName : ''
      },
      immediate: true
    }
  },
  async created () {
    await this.getCustomerData()
    if (this.obj.id) { this.getInfo() }
  },
  methods: {
    async getInfo () {
      const form = await detail({ id: this.obj.id })
      Object.assign(this.form, form)
      this.editInfo = JSON.parse(JSON.stringify(form))
    },
    async getCustomerData () {
      this.customerDataList = await getCustomerData({customerId: this.obj.id})
    },
    async getRental (val) {
      this.form.rental = await getCustomerTypeRental({customerTypeValue: val})
    },
    addCustomer () {
      this.newParams = {
        visible: true,
        obj: {}
      }
    },
    async submit () {
      let _valid = false
      const r = this.$refs.form.validate(valid => {
        _valid = valid
      })
      if (!_valid) return

      checkName({ customerName: this.form.customerName, id: this.obj.id || '' }).then(async (r) => {
        const _api = this.obj.id ? update : create

        const diff = Object.keys(this.editInfo).find(key => {
          // 判断编辑中是否有修改过的数据
          return this.editInfo[key] !== this.form[key]
        })

        if (this.obj.id && diff) {
          this.$confirm('确定修改?数据将按新修改信息生效,请慎重操作', '编辑', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            await _api(this.form)
            this.$message.success('编辑成功')
            this.$emit('after')
            this.close()
          }).catch(() => {

          })
        } else {
          await _api(this.form)
          this.$message.success(this.obj.id ? '编辑成功' : '创建成功')
          this.$emit('after')
          this.close()
        }
      }).catch(e => {
        console.log(e.content)
      })
    }
  }
})
</script>
<style lang="scss" scoped>
.subTitle {
  // border-left: 5px solid #409eff;
  box-shadow: -5px 0 0 0 deepskyblue;
  width: calc(48% - 31px);
  display: inline-block;
  padding-left:5px;
}
.leftForm {
  width: calc(48% - 31px);
  height: 100%;
  margin-left: 30px;
  border-right: 1px #efebeb solid;
  vertical-align: top;
}
.rightForm {
  width: calc(48% - 31px);
  height: 100%;
  margin-left: 30px;
  vertical-align: top;
}
</style>
